<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>后台管理-登陆</title>
    <th:block th:include="include :: header('后台管理-登陆')"/>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        body {
            /*background: #1E9FFF;*/
            /*background: #000000 url(/images/bgimage.jpg) no-repeat fixed top;*/
            display: flex;
            background-color: rgba(25, 25, 25, 1);
        }

        .centerHover {
            color: #fff;
            width: 255px;
            height: 255px;
            background-color: transparent;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -128px;
            margin-left: -128px;
            z-index: 2;
            cursor: pointer;
            line-height: 255px;
            text-align: center;
            transition: all 500ms;

        }

        canvas {
            position: relative;
            z-index: -1;
            width: 100%;
            height: 100%;
            margin: auto;
        }

        body:after {
            content: '';
            background-repeat: no-repeat;
            background-size: cover;
            -webkit-filter: blur(3px);
            -moz-filter: blur(3px);
            -o-filter: blur(3px);
            -ms-filter: blur(3px);
            filter: blur(3px);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
        }

        .admin-login-background {
            width: 360px;
            height: 300px;
            position: absolute;
            left: 70%;
            top: 40%;
            margin-left: -180px;
            margin-top: -100px;
        }

        .logo-title {
            text-align: center;
            letter-spacing: 2px;
            padding: 14px 0;
        }

        .logo-title h1 {
            color: #1E9FFF;
            font-size: 25px;
            font-weight: bold;
        }

        .login-form {
            background-color: #fff;
            border: 1px solid #fff;
            border-radius: 3px;
            padding: 14px 20px;
            box-shadow: 0 0 8px #eeeeee;
        }

        .login-form .layui-form-item {
            position: relative;
        }

        .login-form .layui-form-item label {
            position: absolute;
            left: 1px;
            top: 1px;
            width: 38px;
            line-height: 36px;
            text-align: center;
            color: #d2d2d2;
        }

        .login-form .layui-form-item input {
            padding-left: 36px;
        }

        .captcha {
            width: 60%;
            display: inline-block;
        }

        .captcha-img {
            display: inline-block;
            width: 34%;
            float: right;
        }

        .captcha-img img {
            border: 1px solid #e6e6e6;
            height: 36px;
            width: 100%;
        }
    </style>
</head>
<body>
<div>
    <div class="admin-login-background">
        <div class="layui-form login-form">
            <form class="layui-form" action="">
                <div class="layui-form-item logo-title">
                    <h1>-----------后台登录</h1>
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-username" for="L_username"></label>
                    <input type="text" autocomplete="off" class="layui-input " lay-verify="required|account"
                           id="L_username" name="username" placeholder="用户名或者邮箱">
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-password" for="L_password"></label>
                    <input type="password" autocomplete="off" class="layui-input" lay-verify="required|password"
                           id="L_password" name="password" placeholder="密码">
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-vercode" for="captcha"></label>
                    <input type="text" autocomplete="off" lay-verify="required|captcha"
                           class="layui-input captcha verification"
                           id="captcha" name="captcha" placeholder="图形验证码">
                    <div class="captcha-img">
                        <img id="captchaPic" src="../images/captcha.jpg" th:src="@{/captcha/kaptcha.jpg}"
                             onclick="updateCaptcha()">
                    </div>
                </div>
                <div class="layui-form-item">
                    <input type="checkbox" id="rememberMe" name="rememberMe" lay-skin="primary" title="记住密码">
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit=""
                            lay-filter="login">
                        登 入
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div class="centerHover"><span> </span></div>
</div>
<script type="text/javascript">
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer;

        // 登录过期的时候，跳出ifram框架
        if (top.location != self.location) top.location = self.location;


        // 进行登录操作
        form.on('submit(login)', function (data) {
            data = data.field;

            /*if (data.username == '') {
                layer.msg('用户名不能为空');
                return false;
            }
            if (data.password == '') {
                layer.msg('密码不能为空');
                return false;
            }
            if (data.captcha == '') {
                layer.msg('验证码不能为空');
                return false;
            }*/

            $.post('/captcha', {'captcha': data.captcha}, function (result) {
                if (result) {
                    md5(data.password)
                    $.post('/login', {
                        'username': data.username,
                        'password': md5(data.password),
                        'rememberMe': !!data.rememberMe
                    }, function (result) {
                        if (parse_result(result)) {
                            window.location = '/home';
                        } else {
                            updateCaptcha();
                        }
                    });
                } else {
                    layer.msg('验证码错误', {icon: 2, shade: 0.3, time: 1000});
                    updateCaptcha();
                }
            })
            return false;
        });

    });

    function updateCaptcha() {
        $('#captchaPic').attr('src', '/captcha/kaptcha.jpg');
        $('#captcha').val('');
        //document.getElementById('captchaPic').src = '/captcha/kaptcha.jpg';
    }
</script>
<script>
    var h = $(document).height(),
        w = $(document).width(),
        cw = w,
        ch = h,
        maxorbit = 255, // 距中心的距离
        centery = ch / 2,
        centerx = cw / 2;

    var stars = [],
        collapse = false, // if hovered
        expanse = false; // if clicked

    var canvas = $('<canvas/>').attr({
            width: cw,
            height: ch
        }).appendTo('body '),
        context = canvas.get(0).getContext("2d");

    context.globalCompositeOperation = "multiply";

    function setDPI(canvas, dpi) {
        // 设置CSS大小（如果尚未设置）
        if (!canvas.get(0).style.width)
            canvas.get(0).style.width = canvas.get(0).width + 'px';
        if (!canvas.get(0).style.height)
            canvas.get(0).style.height = canvas.get(0).height + 'px';

        var scaleFactor = dpi / 96;
        canvas.get(0).width = Math.ceil(canvas.get(0).width * scaleFactor);
        canvas.get(0).height = Math.ceil(canvas.get(0).height * scaleFactor);
        var ctx = canvas.get(0).getContext('2d');
        ctx.scale(scaleFactor, scaleFactor);
    }

    setDPI(canvas, 192);//粒子数量

    var star = function () {

        // 获取加权随机数，以便大多数恒星将形成在轨道的中心
        var rands = [];
        rands.push(Math.random() * (maxorbit / 2) + 1);
        rands.push(Math.random() * (maxorbit / 2) + maxorbit);

        this.orbital = (rands.reduce(function (p, c) {
            return p + c;
        }, 0) / rands.length);
        // 完成获得该随机数后，它存储在this.orbital中

        this.x = centerx; // 所有这些恒星始终处于中心x位置
        this.y = centery + this.orbital; // 从中心y +轨道位置开始设置Y位置

        this.speed = (Math.floor(Math.random() * 1.5) + 0.5) * Math.PI / 250; // 这颗恒星的运行速度
        this.rotation = (Math.floor(Math.random() * 360) + 1) * Math.PI / 180; // 开始旋转。如果不是随机的，则所有星星将在一行中生成。

        this.id = stars.length; // This will be used when expansion takes place.

        this.collapseBonus = this.orbital - (maxorbit * 0.7); // This "bonus" is used to randomly place some stars outside of the blackhole on hover
        if (this.collapseBonus < 0) { // 如果崩溃“奖金”为负
            this.collapseBonus = 0; // 将其设置为0，这样就不会有星星进入黑洞
        }

        stars.push(this);
        this.color = 'rgba(255,255,255,' + (1 - ((this.orbital) / 255)) + ')'; // Color the star white, but make it more transparent the further out it is generated
    }
    star.prototype.draw = function () {
        // 星星实际上并没有在X轴上移动。我只是简单地单独旋转每个星星的画布上下文，以便在每个帧中使用不太复杂的数学来旋转它们

        if (expanse == false) {
            this.rotation += this.speed;
            if (collapse == false) { // not hovered
                if (this.y > centery + this.orbital) {
                    this.y -= 2;
                }
                if (this.y < centery + this.orbital - 4) {
                    this.y += 2;
                }
            } else { // on hover
                if (this.y > centery + (maxorbit / 2) + this.collapseBonus) {
                    this.y -= 2;
                }
                if (this.y < centery + (maxorbit / 2) + this.collapseBonus - 4) {
                    this.y += 2;
                }
            }
        } else {
            this.rotation += this.speed / 2;
            if (this.y > centery + (this.id % 100) * -10) {
                this.y -= 4;
            }
        }

        context.save();
        context.fillStyle = this.color;
        context.translate(centerx, centery);
        context.rotate(this.rotation);
        context.translate(-centerx, -centery);
        context.fillRect(this.x, this.y, 1, 1);
        context.fill();
        context.restore();
    }

    $('.centerHover').on('click', function () {
        collapse = false;
        expanse = true;

        $(this).addClass('open');
    });
    $('.centerHover').on('mouseover', function () {
        if (expanse == false) {
            collapse = true;
        }
    });
    $('.centerHover').on('mouseout', function () {
        if (expanse == false) {
            collapse = false;
        }
    });

    window.requestFrame = (function () {
        return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            function (callback) {
                window.setTimeout(callback, 1000 / 60);
            };
    })();

    function loop() {
        context.fillStyle = 'rgba(25,25,25,0.1)'; // 一定程度上清楚了上下文，这样星空后面就会有痕迹
        context.fillRect(0, 0, cw, ch);

        for (var i = 0; i < stars.length; i++) { // 对于每个星星
            if (stars[i] != stars) {
                stars[i].draw(); // Draw it
            }
        }

        requestFrame(loop);
    }

    function init(time) {
        context.fillStyle = 'rgba(25,25,25,1)'; // 最初清除画布，以避免出现太暗的问题
        context.fillRect(0, 0, cw, ch);
        for (var i = 0; i < 2500; i++) { // create 2500 stars
            new star();
        }
        loop();
    }

    init();
</script>
</body>
</html>